<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Worker列表</title>
    <link rel="stylesheet" href="static/css/index.css">
    <script type="text/javascript" src="static/js/jquery-3.7.1.min.js"></script>
    <script>
        $(function () {
            getWorkerList();
        })

        function getWorkerList() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/getWorkerList",
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    console.log(data)
                    var info = `<table id="table1">
                        <tr><td colspan="9">数据展示&nbsp&nbsp<a href="#" onclick="showAddTable()">添加数据</a><a id="time"></a></td></tr>
                        <tr>
                            <td>worker_id</td>
                            <td>department_name</td>
                            <td>worker_date</td>
                            <td>wages</td>
                            <td>politics</td>
                            <td>name</td>
                            <td>birth_date</td>
                            <td colspan="2">操作</td>
                        </tr>`
                    for (const datum of data) {
                        // console.log(datum)
                        info += `
                        <tr>
                            <td>${datum.workerId}</td>
                            <td>${datum.departmentName}</td>
                            <td>${datum.workerDate}</td>
                            <td>${datum.wages}</td>
                            <td>${datum.politics}</td>
                            <td>${datum.name}</td>
                            <td>${datum.birthDate}</td>
                            <td><a href="#" onclick="showEditDict(${datum.workerId})">修改</a></td>
                            <td><a href="#" onclick="delWorkerViaId(${datum.workerId})">删除</a></td>
                        </tr>
                        `
                    }
                    info += `</table>`
                    // jQ 将组合好的元素插入(replace)到div
                    $("#WorkerList").html(info)
                }
            })
        }

        function delWorkerViaId(id) {
            console.log(id)
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/deleteWorker",
                type: "POST",
                dataType: "json",
                data: {'workerId': id},
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getWorkerList()
                }
            })
        }

        function showAddTable() {
            var add = `<table>
        <tr>
            <td colspan="9">数据添加</td>
        </tr>
        <tr>
                            <td>department_name</td>
                            <td>worker_date</td>
                            <td>wages</td>
                            <td>politics</td>
                            <td>name</td>
                            <td>birth_date</td>
            <td colspan="2">操作</td>
        </tr>
        <tr>
            <td><input id="departmentName"></td>
            <td><input id="workerDate"></td>
            <td><input id="wages"></td>
            <td><input id="politics"></td>
            <td><input id="name"></td>
            <td><input id="birthDate"></td>
            <td colspan="1"><a href="#" onclick="addWorker()">添加</a></td>
            <td colspan="1"><a href="#" onclick="removeAddTable()">关闭</a></td>
        </tr>
    </table>`
            $("#addWorkerTable").html(add)
        }

        function addWorker() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/addWorker",
                type: "POST",
                dataType: "json",
                data: {
                    // jQ, 使用 $('#id').val() 的方式直接获取input中的值
                    'departmentName': $('#departmentName').val(),
                    'workerDate': $('#workerDate').val(),
                    'wages': $('#wages').val(),
                    'politics': $('#politics').val(),
                    'name': $('#name').val(),
                    'birthDate': $('#birthDate').val()
                },
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getWorkerList()
                }
            })
        }

        function showEditDict(worker_id) {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/getWorkerList?worker_id=" + worker_id,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    // console.log(data[0])
                    var edit = `<table id="table2">
                        <tr>
                            <td colspan="9">数据修改</td>
                        </tr>
                        <tr>
                            <td>worker_id</td>
                            <td>department_name</td>
                            <td>worker_date</td>
                            <td>wages</td>
                            <td>politics</td>
                            <td>name</td>
                            <td>birth_date</td>
                            <td colspan="2">操作</td>
                        </tr>
                        <tr>
                            <td>${data[0].workerId}</td>
                            <td><input type="text" id="text1" value="${data[0].departmentName}"></td>
                            <td><input type="text" id="text2" value="${data[0].workerDate}"></td>
                            <td><input type="text" id="text3" value="${data[0].wages}"></td>
                            <td><input type="text" id="text4" value="${data[0].politics}"></td>
                            <td><input type="text" id="text5" value="${data[0].name}"></td>
                            <td><input type="text" id="text6" value="${data[0].birthDate}"></td>
                            <td><a href="#" onclick="doEditWorker([${data[0].workerId},$('#text1').val(),$('#text2').val(),$('#text3').val(),$('#text4').val(),$('#text5').val(),$('#text6').val()])">提交修改</a></td>
                            <td><a href="#" onclick="removeEditTable()">关闭</a></td>
                        </tr></table>`
                    $("#editWorkerTable").html(edit)
                }
            })
        }

        function doEditWorker(list) {
            console.log(list)
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/updateWorker",
                type: "POST",
                dataType: "json",
                data: {
                    'workerId': list[0],
                    'departmentName': list[1],
                    'workerDate': list[2],
                    'wages': list[3],
                    'politics': list[4],
                    'name': list[5],
                    'birthDate': list[6],
                },
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    location.reload()
                    // getRQList()
                }
            })
        }

        function removeAddTable() {
            $("#addWorkerTable").html(``)
        }

        function removeEditTable() {
            $("#editWorkerTable").html(``)
        }

    </script>
</head>
<body>
<div id="WorkerList"></div>
<br>
<div id="addWorkerTable">
</div>
<br>
<div id="editWorkerTable"></div>
</body>
</html>